<style>
    .ivu-modal .ivu-select-dropdown {
        position: absolute !important;
        max-height: 200px;
    }
</style>
<template>
    <rui-page :defines="defines">

        <div style="background-color: #f9fafc;">
            <Alert show-icon style="height: 30px;">
                <div style="margin-top:-2px" >请输入查询条件</div>
            </Alert>
<!--            <rui-query-->
<!--                ref="searchForm"-->
<!--                :query="queryData"-->
<!--                :query-rows="searchFormLabels"-->
<!--            />-->
            <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
                <Row>
                    <Form-item label="文件类型" prop="attachmentName">
                        <Select v-model="searchForm.attachmentName" filterable clearable placeholder="请选择文件类型" style="width:200px">
                            <Option v-for="item in attachmentData" :label="item.attachmentName" :value="item.attachmentName" :key="item.attachmentName">{{item.attachmentName}}</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="退回话术" prop="backWords">
                        <Input type="text" v-model="searchForm.backWords" clearable placeholder="请输入退回话术" style="width: 200px" />
                    </Form-item>
                    <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
                    <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
                </Row>
                <Row>
                    <Button @click="add" type="primary" icon="md-add">新增</Button>
                </Row>
            </Form>
        </div>
        <div style="background-color: #f9fafc;">\
            <Table v-bind:loading="loading"
                   border
                   v-bind:columns="columns"
                   v-bind:data="data"
                   ref="table">
                <template slot="opt" slot-scope="{ row }">
                    <div>
                        <Button @click="edit(row)" size="small" type="primary" icon="ios-create">编辑</Button>
                        <Button type="error" size="small" icon="md-trash" @click="remove(row)">删除</Button>
                    </div>
                </template>
            </Table>
        </div>
        <div>
            <Row type="flex" justify="end" class="page">
                <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                      @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                      size="small" show-total show-elevator show-sizer></Page>                    </Row>
        </div>
        <Modal
            v-model="labelModalVisible"
            :title="modalTitle"
            :closable="false"
            :width="1000"
            :mask-closable="false"
            @on-ok="labelSubmit"
        >
            <rui-form :form-options="labelFormLabels" :read-only="false"
                      ref="labelForm" style="margin-top:-10px;height: 250px;">
                <template slot="attachmentName" slot-scope="{ key,data }">
                    <span>
                         <Select v-model="data[key]" style="width:200px" filterable remote>
                            <Option v-for="item in attachmentData" :value="item.attachmentName" :key="item.attachmentId" @click.native="changeAttachment(item)">{{ item.attachmentName}} </Option>
                        </Select>
                    </span>
                </template>
            </rui-form>
            <div slot="footer">
                <Button size="small" type="primary"  @click="labelModalVisible = false" icon="ios-backspace">取消</Button>
                <Button type="primary" size="small" icon="md-bookmark" @click="labelSubmit">保存</Button>
            </div>
        </Modal>
    </rui-page>
</template>
<script>
    import backReasonAllocationDefine from "../defines/back-reason-allocation";
    import {
        getBackReasonList,
        getAttachmentNameList,
        addBackReason,
        editBackReason,
        deleteBackReason
    } from "@/projects/afs-core-business/api/afs-case/back-reason-allocation/backReasonAllocation";
    import {deepClone} from "@/libs/utils/ObjectClone";
    export default {
        name: "backReasonAllocation",
        data() {
            return {
                loading: true,
                labelModalVisible: false,
                modalTitle: "",
                attachmentData:[],
                searchForm:{
                    pageNumber:1,
                    pageSize:10,
                    attachmentId:'',
                    attachmentName:'',
                    backWords:''
                },
                searchFormLabels: [
                    {defineId: "backReasonAllocation", span: 15, fields: ["attachmentName","backWords"
                        ]}
                ],
                attachmentSearchFrom:{},
                labelFormLabels: [
                    {
                        grids: [
                            {
                                defineId: "backReasonAllocation",
                                span: 7,
                                fields: ['attachmentName','backWords'],
                                slots: [{key: 'attachmentName', slotName: 'attachmentName'}]
                            }
                        ]

                    }
                ],
                columns:[
                    {
                        key: 'opt',
                        title: '操作',
                        width: 240,
                        align: 'center',
                        slot: 'opt',
                        columnShow:true
                    },
                    {
                        title: "配置ID",
                        key: "attachmentId",
                        width: 200,
                        type:'text',
                        align: "center"
                    },
                    {
                        title: "类型名称",
                        key: "attachmentName",
                        width: 200,
                        type:'text',
                        align: "center",
                        dicKey: 'confAttachmentName'
                    },
                    {
                        title: "退回话术",
                        align: "center",
                        key: "backWords"
                    },
                ],
                data:[],
                total: 0,
                manualLabelColumns: [
                    'opt', 'attachmentId','attachmentName','backWords'
                ],

            };
        },
        computed: {
            defines() {
                return [
                    {
                        id: "backReasonAllocation",
                        fields: backReasonAllocationDefine
                    }
                ];
            }
        },
        methods: {
            handleSearch() {
                this.searchForm.pageNumber = 1
                this.searchForm.pageSize = 10
                this.getTaskList()
            },
            handleReset() {
                this.$refs.searchForm.resetFields()
                this.searchForm = {
                    pageNumber: 1,
                    pageSize: 10
                }

                // 重新加载数据
                this.handleSearch()
            },
            changePage(v) {
                this.searchForm.pageNumber = v
                this.getTaskList()
                this.clearSelectAll()
            },
            changePageSize(v) {
                this.searchForm.pageSize = v
                this.getTaskList()
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            getTaskList() {
                getBackReasonList(this.searchForm).then(res => {
                    if (res.code === "0000") {
                        this.data = res.data.records
                        this.total = res.data.total
                        this.loading = false
                    }
                });
            },
            refresh() {
                this.$refs['labelTable'].reloadData();
            },

            labelSubmit() {
                this.$refs.labelForm.getForm().validate(valid => {
                    if (valid) {
                        if (this.modalType === 0) {
                            let data = this.$refs.labelForm.getFormData();
                            data.attachmentId=this.attachmentSearchFrom.attachmentId;
                            addBackReason(data)
                                .then(res => {
                                    if (res.code === "0000") {
                                        this.$Message.success("操作成功");
                                        this.labelModalVisible = false;
                                        this.getTaskList()
                                    }
                                })
                                .catch(() => {
                                    this.refresh();
                                });
                        } else {
                            // 编辑
                            let data = this.$refs.labelForm.getFormData();
                            data.attachmentId=this.attachmentSearchFrom.attachmentId;
                            editBackReason(data)
                                .then(res => {
                                    if (res.code === "0000") {
                                        this.$Message.success("操作成功");
                                        this.labelModalVisible = false;
                                        this.getTaskList()
                                    }
                                })
                                .catch(() => {
                                    this.refresh();
                                });
                        }
                    }
                });
            },
            remove(v) {
                console.log(v);
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除配置: " + v.attachmentName + " ?",
                    onOk: () => {
                        this.loading = true;
                        deleteBackReason(v).then(res => {
                            if (res.code === "0000") {
                                this.$Message.success("删除成功");
                                this.refresh();
                            }
                        });
                        setTimeout(() => {
                            this.getTaskList()
                            this.loading =false;
                        }, 300);
                    }
                });
            },
            getAttachmentNameList(){
                getAttachmentNameList().then(res=>{
                    console.log(res.data,'this.attachmentData')
                    this.attachmentData=res.data;
                })
            },
            add() {
                this.$refs.labelForm.resetFrom();
                this.modalType = 0;
                this.modalTitle = "新增";
                this.labelModalVisible = true;
                this.$refs.labelForm.setAllFieldRequired(true);
            },
            edit(row) {
                this.modalType = 1;
                this.modalTitle = "编辑";
                getAttachmentNameList().then(res=>{
                    this.attachmentData=res.data;
                })
                this.$refs.labelForm.updateFormData(row);
                this.$refs.labelForm.setAllFieldRequired(true);
                this.labelModalVisible = true;
            },
            changeAttachment(row){
                this.attachmentSearchFrom.attachmentId=row.attachmentCode;
            },
        },
        mounted() {
            this.getAttachmentNameList();
            this.getTaskList();
        }
    };
</script>
